import { SearchOutlined } from '@ant-design/icons';
import { Button, Card, Form, Input } from 'antd';
import { memo } from 'react';

interface Iprops {
  onSearch: (keyword?: any) => void; // 搜索回调函数
  data: Iform[];
}
interface Iform {
  label: string;
  name: string;
  type: string;
  placeholder: string;
  rules?: any[];
}

const ProSearch: React.FC<Iprops> = (props) => {
  const { onSearch, data } = props;
  const [form] = Form.useForm();

  const handleSearch = () => {
    onSearch(form.getFieldsValue());
  };

  function handleReset() {
    form.resetFields();
    onSearch();
  }

  return (
    <Card variant="borderless" style={{ marginTop: '20px' }}>
      <Form form={form} layout="inline" onFinish={handleSearch} style={{ width: '100%' }}>
        {data &&
          data.map(
            (item: Iform) =>
              item.type === 'input' && (
                <Form.Item label={item.label} name={item.name} key={item.name} rules={item.rules}>
                  <Input placeholder={item.placeholder} />
                </Form.Item>
              ),
          )}

        <Form.Item>
          <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
            搜索
          </Button>
          <Button onClick={handleReset} style={{ marginLeft: 8 }}>
            重置
          </Button>
        </Form.Item>
      </Form>
    </Card>
  );
};

export default memo(ProSearch);
